<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view class="bg-white radius flex flex-direction padding-lr justify-between">
    <uni-forms ref="form" border :rules="rules"
               :modelValue="formData" label-position="left" label-align="right"
               label-width="50px">
      <uni-forms-item class="solid-bottom" required label="姓名" name="name">
        <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名"/>
      </uni-forms-item>
      <uni-forms-item label="年龄" name="name" required>
        <uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄"/>
      </uni-forms-item>
      <uni-forms-item label="性别" required>
        <view class="margin-top-xs">
          <uni-data-checkbox v-model="formData.sex" :localdata="sexs"/>
        </view>
      </uni-forms-item>
      <uni-forms-item label="生日" required>
        <uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthday"/>
      </uni-forms-item>
      <uni-forms-item label="学历" required>
        <uni-data-select v-model="formData.culture" :localdata="cultures"></uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="手机号码" required>
        <uni-easyinput v-model="formData.phone" placeholder="请输入手机号码"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="城市" required>
        <view style="margin-top: 9px ">
          <picker mode="region" @change="RegionChange" :value="formData.region">
            {{ formData.region[0] }}，{{ formData.region[1] }}，{{ formData.region[2] }}
          </picker>
        </view>
      </uni-forms-item>
      <uni-forms-item label="详细地址" required>
        <uni-easyinput type="textarea" v-model="formData.address" placeholder="..."></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
  </view>
  <view class="text-center padding text-gray text-df" style="height: 15vh">
    平台将会收集信息用于确认服务对象
  </view>
  <view class="cu-bar foot  bg-white" style="z-index: 5">
    <view class="flex flex-sub padding-lr flex-direction">
      <button class="cu-btn lg bg-gradual-blue" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {useUserStore,} from '@/store'
import api from '@/api'
import {debounce} from "@/utils/common/myUtils";
import MrCustom from "@/components/common/MrCustom.vue";

const userStore = useUserStore()
const userInfo = userStore.userInfo
const formData = ref({
  username: '',
  name: '',
  age: '',
  sex: '',
  birthday: '',
  culture: '',
  phone: '',
  address: '',
  region: ['北京市', '北京市', '东城区'],
})
const form = ref()
const rules = ref()
const sexs = ref([
  {
    text: '男',
    value: '男'
  }, {
    text: '女',
    value: '女'
  }],)
const cultures = ref([
  {
    value: '文盲',
    text: "文盲"
  },
  {
    value: '小学',
    text: '小学'
  },
  {
    value: '初中',
    text: '初中'
  },
  {
    value: '高中',
    text: '高中'
  },
  {
    value: '大专及以上',
    text: '大专及以上'
  },
])
const RegionChange = (e: { detail: { value: string[]; }; }) => {
  formData.value.region = e.detail.value
}

const submitForm = debounce(() => {
  api.patient.create({
    username: userInfo.username,
    avatar: userInfo.avatar,
    name: formData.value.name,
    age: formData.value.age,
    sex: formData.value.sex,
    birthday: formData.value.birthday,
    culture: formData.value.culture,
    phone: formData.value.phone,
    address: formData.value.address,
    region: JSON.stringify(formData.value.region),
  }).then((res => {
    if (res.data.code === 0) {
      uni.switchTab({
        url: '/pages/user/mine/mine',
        success: () => {
          userInfo.status = 2
          userStore.setUserInfo(userInfo)
          uni.showToast({
            icon: 'success',
            title: res.data.msg,
          })
        }
      })

    }
  }))
}, 1000)
</script>

<style>
</style>
